<template>
    <view>
        <!-- pages/drawPage/drawPage.wxml -->
        <custom-header title="抽奖中心" />

        <view class="container">
            <view class="prize-row">
                <view :class="'prize-item ' + (activeIndex === index ? 'active' : '')" :data-index="index" @tap="startLottery" v-for="(item, index) in prizesRow1" :key="index">
                    {{ item }}
                </view>
            </view>
            <view class="prize-row">
                <view
                    :class="'prize-item ' + (activeIndex === index + 4 ? 'active' : '')"
                    :data-index="index + 4"
                    @tap="startLottery"
                    v-for="(item, index) in prizesRow2"
                    :key="index"
                >
                    {{ item }}
                </view>
            </view>
            <button @tap="startLottery">开始抽奖</button>
        </view>
    </view>
</template>

<script>
// import customHeader from '@/components/custom-header/index';
// pages/drawPage/drawPage.js
export default {
    // components: {
    //     customHeader
    // },
    data() {
        return {
            prizesRow1: ['奖品1', '奖品2', '奖品3', '奖品4'],
            prizesRow2: ['奖品5', '奖品6', '奖品7', '奖品8'],
            activeIndex: -1,
            isLottering: false,
            timer: null,
            resultIndex: -1
        };
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        startLottery() {
            if (this.isLottering) {
                return;
            }
            this.setData({
                isLottering: true,
                resultIndex: Math.floor(Math.random() * 8) // 随机生成一个中奖索引
            });

            this.runLottery();
        },

        runLottery() {
            let currentIndex = 0;
            const totalPrizes = 8;
            const interval = 100; // 跳动间隔时间，单位毫秒
            const duration = 1000; // 跳动总时间，单位毫秒

            this.timer = setInterval(() => {
                this.setData({
                    activeIndex: currentIndex % totalPrizes
                });
                currentIndex++;
            }, interval);
            setTimeout(() => {
                clearInterval(this.timer);
                this.setData({
                    activeIndex: this.resultIndex,
                    isLottering: false
                });
                uni.showToast({
                    title: `恭喜你获得${this.getPrizeName(this.resultIndex)}`,
                    icon: 'none'
                });
            }, duration);
        },

        getPrizeName(index) {
            if (index < 4) {
                return this.prizesRow1[index];
            } else {
                return this.prizesRow2[index - 4];
            }
        }
    }
};
</script>
<style>
page {
    background: linear-gradient(180deg, #eeef68 0%, #fcfde8 30%, #ffffff 43%, #fffffc 57%, #fffce1 100%);
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.prize-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.prize-item {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    margin: 5px;
}

.active {
    background-color: yellow;
    border-color: orange;
}
</style>
